<template>
  <div ref="scrollRef" class="box">
    <category />
    <banner />
    <lists :products="products" />
  </div>
</template>

<script setup>
import category from "./components/category.vue";
import banner from "./components/banner.vue";
import lists from "./components/lists.vue";
import { onActivated, onMounted, ref, useTemplateRef } from "vue";
import { getListData } from "@/http/api";
import { onBeforeRouteLeave } from "vue-router";

const scrollRef = useTemplateRef("scrollRef");
let scrollHeight = ref(0);

const products = ref([]);
onMounted(async () => {
  const resp = await getListData();
  products.value = resp.data;
});

onActivated(() => {
  scrollRef.value.scrollTop = scrollHeight.value;
});

// 页面离开路由
onBeforeRouteLeave((to, from, next) => {
  scrollHeight.value = scrollRef.value.scrollTop;
  next();
});
</script>

<style scoped>
.box {
  overflow: auto;
  height: 100vh;
}
</style>
